<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="img/1.jpg" sizes="32x32" type="image/jpg">
    <link rel="icon" href="img/1.jpg" sizes="16x16" type="image/jpg">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="bootstrap-admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="dist/css/bootstrap-admin.min.css">
    <title>超市货物管理系统</title>
    <style>
        body {
            background-color: #f4f4f4;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

        .form {
            width: 380px;
            max-width: 100%;
            background-color: rgba(255, 255, 255, 0.8); /* 添加透明度 */
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h2 {
            color: #333;
            margin-bottom: 20px;
        }

        .text-secondary {
            color: #777;
        }

        .mb-3 {
            margin-bottom: 15px;
        }

        .input-group-text {
            background-color: #fff;
            border: 1px solid #ced4da;
        }

        .form-check-input {
            margin-top: 0;
        }

        .btn-outline-success {
            color: #28a745;
            border-color: #28a745;
        }

        .btn-outline-success:hover {
            background-color: #28a745;
            color: #fff;
        }

        .link-success {
            color: #28a745;
        }
    </style>
</head>

<body>

<div class="container">
    <form id="form" class="form">
        <h2>超市货物管理系统</h2>
        <p class="text-secondary">21106214吕建新</p>

        <div class="mb-3">
            <div class="input-group">
                <span class="input-group-text"><i class="bi bi-person"></i></span>
                <input type="text" class="form-control" placeholder="请输入用户" name="username" id="username" aria-label="username">
            </div>
        </div>

        <div class="mb-3">
            <div class="input-group">
                <span class="input-group-text"><i class="bi bi-person-lock"></i></span>
                <input type="password" class="form-control" placeholder="请输入密码" name="userpwd" autocomplete="off" id="password" aria-label="password">
            </div>
        </div>

        <div class="mb-3">
            <div class="input-group">
                <span class="input-group-text"><i class="bi bi-shield-lock"></i></span>
                <input type="text" class="form-control" id="captcha" name="captcha" aria-label="captcha" placeholder="请输入验证码" style="min-width: 80px">
                <img src="dist/img/captcha.gif" alt="验证码" class="bsa-cursor-pointer" style="height: 38px;width: 120px" />
            </div>
        </div>

        <div class="mb-3 d-flex align-items-center justify-content-between flex-wrap gap-3 ">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1" name="remember" value="1">
                <label class="form-check-label" for="exampleCheck1">十天内免登录</label>
            </div>
            <a href="javascript:" class="link-success text-decoration-none">忘记密码?</a>
        </div>

        <div class="d-grid gap-2">
            <button class="btn btn-outline-success" type="submit"><i class="bi bi-box-arrow-in-right"></i>登录</button>
            <div class="d-grid gap-2">
                <a href="/register" class="btn btn-outline-success"><i class="bi bi-box-arrow-in-right"></i> 注册服务</a>
            </div>
        </div>
    </form>
</div>

<script src="lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/formvalidation/js/formValidation.js"></script>
<script src="lib/formvalidation/js/framework/bootstrap.js"></script>
<script src="lib/formvalidation/js/language/zh_CN.js"></script>
<script src="dist/js/bootstrap-admin.min.js"></script>
<script src="dist/js/app.js"></script>

<!--假数据模拟,生产环境中请直接删除该js-->
<!--<script src="../dist/js/bootstrap-admin.mock.js"></script>-->

<script>
    $(function () {
        //前端表单验证
        $('#form').formValidation({
            fields: {
                username: {
                    validators: {
                        notEmpty: true,
                    }
                },
                password: {
                    validators: {
                        notEmpty: true,
                    }
                },
                captcha: {
                    validators: {
                        notEmpty: true,
                    }
                }
            }
        }).on('success.form.fv', function (e) {
            //阻止表单提交
            e.preventDefault();

            //得到表单对象
            let $form = $(e.target);
            //获取数据
            let data = $form.serialize();

            //发起ajax请求
            $.ajax({
                method: 'post',
                url: '/api/login',
                //表单数据
                data: data,
            }).then(response => {
                console.log(response)
                if (response === 1) {
                    $.toasts({
                        type: 'success',
                        content: '登录成功',
                        onHidden: function () {
                            top.location.replace('/main');
                        }
                    })
                } else {
                    $.toasts({
                        type: 'error',
                        content: '登录失败，请检查用户名和密码',
                        onHidden: function () {
                            top.location.replace('/');
                        }
                    })
                }
            });
        });
    })
</script>

</body>

</html>
